<template>
	<view class="app_Cont">
		<view class="showCont" v-if="showCont">
			
			<scroll-view class="workCont" scroll-y="true" @scrolltolower="scrolltolower" lower-threshold="10" >
				<view class="bookItem" @click="detailFn(item)" :key="index" v-for="(item,index) in listArr">
					<view class="bootTop">
						<view class="bookHead">
							<view class="bookHeadLeft">
								<view class="bookName">{{item.zw}}</view>
								<view class="workTag">活跃</view>
							</view>
							<view class="workMoney">{{item.type==1?item.qwyx+'美元':item.qwyx}}</view>
						</view>
						<view class="bookTags">
							<view class="bookTagsItem">{{item.zs}}</view>
							<view class="bookTagsItem">{{item.cblx=='均可'?'船型均可':item.cblx}}</view>
							<view class="bookTagsItem">{{item.hxyq=='均可'?'航线均可':item.hxyq}}</view>
						</view>
						<view class="bookOtherInfo">
							<view class="itemDes">
								<view class="iconfont icon-xueli"></view>
								<view>{{item.xl}}</view>
							</view>
							<view class="itemDes">
								<view class="iconfont icon-gongzuojingyan"></view>
								<view>{{item.gzjy}}<text v-if="item.type==1">年</text>经验</view>
							</view>
							<view class="itemDes noRight flex_Pull">
								<text class="iconfont icon-purseS-fill"></text>
								<text class="overText">{{item.jg}}</text>
							</view>
						</view>
					</view>
					<view class="bootUnder">
						<view class="comLeft">
							<view class="comImg iconfont icon-chuanyuanzhaopin">
								
							</view>
							<view class="comInfo">
								<view class="comInfoTop">
									{{item.real_name}} · {{item.age}}岁
								</view>
							</view>
						</view>
						<view class="workTime">浏览时间 {{item.create_time}}</view>
					</view>
				</view>
				<noData v-if="listArr.length==0&&!isChange"></noData>
				<loadMore v-if="!isChange&&last_page==page"></loadMore>
			</scroll-view>
		</view>
		<load v-if="!showCont||isChange"></load>
	</view>
</template>

<script>
	import noData from '@/components/noData.vue'
	import load from '@/components/load.vue'
	import loadMore from '@/components/loadMore.vue'
	
	import api from '@/http/api.js'
	export default {
		components:{noData,load,loadMore},
		data() {
			return {
				showCont:false,
				listArr:[],
				page:1,
				per_page:10,
				last_page:0,
				isChange:false,
			};
		},
		methods:{
			scrolltolower(){
				if(this.page<this.last_page){
					this.page++
					this.isChange = true
					this.getData()
				}
			},
			serchFn(){
				this.page =1
				this.listArr = []
				this.isChange = true
				this.getData()
			},
			detailFn(item){
				uni.navigateTo({
					url: '../bootDetail/bootDetail?id='+item.biographical_notes_id
				});
			},
			getData(){
				let data = {
					
					page:this.page,
					per_page:this.per_page,
				}
				api.getRequst(data,'/api/Crew/browsingHistory').then((res)=>{
					if(res.code==1){
						let arr = res.data.data
						for(let item of arr){
							this.listArr.push(item)
						}
						this.last_page = res.data.last_page
					}
					this.showCont = true
					this.isChange = false
				})
			}
		},
		created() {
			this.getData()
		}
	}
</script>
<style lang="scss">
	
	.showCont{
		height: 100vh;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}

.workCont{
	width: 100%;
	height: 500rpx;
	flex: 1;
	padding: 30rpx 4% 30rpx;
	overflow-y: auto;
	box-sizing: border-box;
	.bookItem{
		// background-color: #3f55cc;
		border-radius: 30rpx;
		background-color: #fff;
		overflow: hidden;
		width: 100%;
		padding:30rpx 30rpx 25rpx;
		box-sizing: border-box;
		margin-bottom: 30rpx;
		.bootTop{
			.bookHead{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.bookHeadLeft{
					display: flex;
					align-items: center;
					.bookName{
						font-size: 30rpx;
						font-weight: bold;
						// margin: 0 10rpx;
						margin-right: 10rpx;
					}
					.workTag{
						padding: 5rpx 20rpx;
						font-size: 24rpx;
						// border: 1px solid #f56c6c;
						// background-color: ;
						background-image: linear-gradient(to right, #f56c6c,#ebc0b4);
						color: #fff;
						// margin-left: 10rpx;
						border-radius: 20rpx 0 20rpx 0;
						transform: scale(0.85);
					}
				}
				.workMoney{
					color: #3f55cc;
					font-size: 30rpx;
				}
			}
			.bookTags{
				display: flex;
				align-items: center;
				margin: 5rpx 0 25rpx;
				.bookTagsItem{
					margin-top: 15rpx;
					padding: 5rpx 20rpx;
					background-color:#dae3fb;
					color: #3f55cc;
					font-size: 26rpx;
					border-radius: 0rpx 25rpx 0rpx 0rpx;
					margin-right: 20rpx;
				}
				.overText{
					max-width: 250rpx;
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
				}
			}
			.bookOtherInfo{
				width: 100%;
				display: flex;
				align-items: center;
				.itemDes{
					display: flex;
					align-items: center;
					font-size: 24rpx;
					border-right: 1px solid #666;
					color: #666;
					padding-right: 25rpx;
					height: 26rpx;
					line-height: 26rpx;
					margin-left: 25rpx;
					.iconfont{
						font-size: 24rpx;
						height: 26rpx;
						line-height: 26rpx;
						margin-right: 8rpx;
					}
				}
				.itemDes:first-child{
					margin-left: 0;
				}
				.noRight{
					border-right: none;
				}
				.flex_Pull{
					flex: 1;
					width: 100rpx;
					.overText{
						width: 100%;
						height: 26rpx;
						line-height: 26rpx;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
					}
				}
			}
		}
		.bootUnder{
			display: flex;
			
			justify-content: space-between;
			align-items: center;
			padding-top: 25rpx;
			margin-top: 25rpx;
			border-top: 1px dashed #ddd;
			// background-color: #cadfff;
			// color: #666;
			.comLeft{
				display: flex;
				align-items: center;
				.comImg{
					margin-right: 20rpx;
				}
				.comInfo{
					.comInfoUnder{
						color: #666;
						margin-top: 6rpx;
						font-size: 24rpx;
						display: flex;
						align-items: center;
						.comYuan{
							margin: 0 10rpx;
						}
					}
					
				}
			}
			.workTime{
				color: #999;
				font-size: 24rpx;
			}
		}
		
	}
	
}
</style>
